<template>
  <div class="content">
    <el-form :inline="true" :model="queryForm" class="form-inline">
      <el-form-item label="单元号">
        <el-input v-model="queryForm.num" placeholder="请输入单元号" clearable />
      </el-form-item>

      <el-form-item label="书名">
        
        <el-select v-model="queryForm.bookId" placeholder="请选择" clearable >
          <el-option v-for="item in bookList" :key="item.id" :label="item.bookName" :value="item.id" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="loadUnitList">查询</el-button>
      </el-form-item>
    </el-form>

    <div style="margin-bottom:10px;">
      <el-button type="primary" @click="handleSaveUnit(null)">添加单元</el-button>
    </div>
    
    <el-table :data="unitList" stripe>
      <el-table-column prop="bookName" label="书籍名称" />

      <el-table-column label="单元号">  
  <template #default="scope">  
    <span>unit{{ scope.row.num }}</span>  
  </template>  
</el-table-column>

      <el-table-column label="操作" >
        <template #default="scope">
          <el-button size="small" style="margin-left: 2px;" @click="handleSaveUnit(scope.row.id)">编辑</el-button>
          <el-button size="small" @click="handleDelete(scope.row.id)">删除</el-button>
          
        </template>
      </el-table-column>

    </el-table>

    <div style="margin-top: 10px;">
      <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
      />
    </div>
  </div>

</template>

<script setup>  
import { reactive, ref } from "vue";  
import { useRouter } from "vue-router";  
import { getUnitList , deleteUnitById} from "@/api/unit";  
import { getBookList } from "@/api/book";  
import { ElMessage, ElMessageBox } from 'element-plus';  
  
const router = useRouter();  
  
const queryForm = reactive({  
  num: null,  
 bookId:null,
  page: 1,  
  pageSize: 10  
});  
  
let unitList = reactive([]);  
let bookList = reactive([]);  
  
let total = ref(0);  
  
// 加载全部书籍  
getBookList().then(resp => {  
  bookList.push(...resp.data);  
});  
  
let handleSaveUnit = (unitId) => {  
  if (unitId) {  
    // 编辑  
    router.push({ path: '/unit/save', query: { unitId: unitId } });  
  } else {  
    // 添加  
    router.push({ path: '/unit/save' });  
  }  
}  
 
let handleDelete = (bookId) => {  
  // 确认对话框  
  ElMessageBox.confirm(  
    "是否删除?",  
    '提示',  
    {  
      confirmButtonText: '确定',  
      cancelButtonText: '取消',  
      type: 'warning',  
    }  
  ).then(() => {  
    // 发送请求  
    deleteUnitById(bookId).then(resp => {  
      loadUnitList();  
    });  
  }).catch(() => {  
  });  
} 

  
// 定义方法  
let loadUnitList = () => {  
  // 准备数据  
  getUnitList(queryForm).then(resp => {  
    unitList.length = 0;  
    unitList.push(...resp.data);  
  
    total.value = resp.total;  
  });  
}  
  
let handleSizeChange = (pageSize) => {  
  queryForm.pageSize = pageSize;  
  loadUnitList();  
}  
  
let handlePageChange = (page) => {  
  queryForm.page = page;  
  loadUnitList();  
}  
  
loadUnitList();  
</script>

<style scoped>
</style>

<style>
.form-inline .el-select {
  --el-select-width: 220px;
}
</style>
